<template>
    <div class="adv-banner">
        <el-image
            :src="src"
            fit="cover"
            :alt="alt"
            style="width: 100%; height: 100%;"
        ></el-image>

        <div class="content btn-content">
            <a class="btn" href="/member">
                立即体验
            </a>
        </div>
    </div>
</template>

<script>
import advJpg from '@images/banner/adv.jpg';

export default {
    props: {
        src: {
            type: String,
            default: advJpg,
        },
        alt: {
            type: String,
            default: '惠标E站',
        }
    },
    data() {
        return {

        };
    },
};
</script>

<style lang="scss">
.adv-banner{
    height: 140px;
    background: #171615;
    position: relative;

    .btn-content{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%);
        height: 100%;

        .btn{
            position: absolute;
            font-size: 18px;
            font-weight: bold;
            color: #181818;
            line-height: 1em;
            padding: 14px 28px;
            background: #edcf9f;
            background-image: linear-gradient(-45deg, #CBA576, #FCE0B0);
            right: 200px;
            top: 48px;
            border-radius: 23px;
        }
    }
}
</style>